<!--  -->
<template>
  <div class>
    <!-- <img src="../../assets/img/banner.png" alt class="bannger" /> -->
    <Carousel
          v-model="value1"
          loop
          class="my-swipe"
          :autoplay="setting.autoplay"
          :autoplay-speed="setting.autoplaySpeed"
          :dots="setting.dots"
          :radius-dot="setting.radiusDot"
          :trigger="setting.trigger"
          :arrow="setting.arrow"
        >
          <CarouselItem v-for="(item,index) in dataImg" :key="index">
            <img :src="item.bannerUrl" alt class="my-swipe-img" />
          </CarouselItem>
        </Carousel>
    <titlemeta></titlemeta>

    <div class="lservice business top">
      <div class="new_title">
        <div
          class="new_title_industry"
          :class="{'new_title_class': industryNews}"
          @click="industryNewsBut(0)"
        >行业新闻</div>
        <div class="new_title_g"></div>
        <div
          class="new_title_industry"
          :class="{'new_title_class': !industryNews}"
          @click="industryNewsBut(1)"
        >企业新闻</div>
      </div>
      <div class="new_title_content">
        <div class="new_title_content_list" v-for="(item,index) in newData" :key="index">
          <div class="new_title_content_list_img_left">
            <img :src="item.picture" alt class="new_title_content_list_img" />
          </div>
          <div class="new_title_content_list_img_right">
            <div
              class="new_title_content_list_img_right_title"
              @click="getInfo(item)"
            >{{item.title}}</div>
            <div class="new_title_content_list_img_right_content">{{item.remark}}</div>
            <div class="new_title_content_list_img_right_timeType">
              <div class="new_title_content_list_img_right_timeType_time">{{item.createTime | formatDate}}</div>
              <div>行业：{{item.type}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import titlemeta from "../../components/titlemeta";
import { bannerList,newFindByPageList } from "../../api/info";
export default {
  components: {
    titlemeta
  },
  data() {
    return {
      industryNews: true, // 行业新闻  企业新闻
      newData: [],
      value1: 0,
      setting: {
        autoplay: true,
        autoplaySpeed: 2000,
        dots: "inside",
        radiusDot: false,
        trigger: "click",
        arrow: "hover"
      },
      // 轮播数据
      dataImg: []
    };
  },
  computed: {},
  watch: {},
  methods: {
    // banner get
    getbannerList(appType) {
      bannerList(appType).then(res => {
        this.dataImg = res.data;
      });
    },
    // 新闻选择
    industryNewsBut(type) {
      if (type == 0) {
        this.industryNews = true;
        this.getNewFindByPageList("行业新闻");
      } else {
        this.industryNews = false;
        this.getNewFindByPageList("企业新闻");
      }
    },
    getNewFindByPageList(type) {
      let data = {
        pageSize: 9999,
        currentPage: 1,
        params: {
          type: type
        }
      };
      newFindByPageList(data).then(res => {
        this.newData = res.data.list;
      });
    },
    //  新闻详情
    getInfo(item) {
      this.$router.push({ path: "/newsInfo", query: { id: item.id } });
    }
  },
  created() {
    this.getNewFindByPageList("行业新闻");
    this.getbannerList(14);
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../assets/index.scss");
.my-swipe {
  height: 4.23rem;
  color: #fff;
  font-size: 0.3rem;
  text-align: center;
}
.my-swipe-img {
  width: 100%;
  height: 4.6rem;
}
.bannger {
  width: 100%;
}
.top {
  margin: 1rem 0;
}
@media screen and (max-width: 580px){
  .my-swipe-img,
  .section,
  .my-swipe {
    height: 1.5rem;
  }
}
</style>